<template>
    <div>
        <image src="/static/dingbu.png" class="mine-navbar-bg" :style="{ height: navbarHeight + 'rpx' }" mode="aspectFill"></image>
        <u-navbar title="检测问题反馈" :autoBack="true" leftIconColor="#fff" bgColor="transparent"
            :titleStyle="{ color: '#fff' }" safeAreaInsetTop placeholder></u-navbar>

        <!-- 顶部筛选区域（模仿 02jcrwxf.vue） -->
        <view class="search-filter-box">
            <!-- 全局搜索 -->
            <view class="search-row">
                <u-search v-model="searchKeyword" placeholder="请输入关键词搜索" @search="onSearch"></u-search>
            </view>

            <!-- 筛选条件 -->
            <view class="filter-row">
                <view class="filter-item">
                    <text class="filter-label">发送时间</text>
                    <view class="date-inputs">
                        <view class="date-input-wrapper" @click="showStartYearPicker = true">
                            <u--input v-model="filter.startDate" placeholder="开始日期" readonly
                                :customStyle="{ height: '64rpx', fontSize: '16rpx', padding: '0 16rpx' }"></u--input>
                            <u-icon name="calendar" size="16" color="#999" class="calendar-icon" />
                        </view>
                        <text class="date-separator">至</text>
                        <view class="date-input-wrapper end" @click="showEndYearPicker = true">
                            <u--input v-model="filter.endDate" placeholder="结束日期" readonly
                                :customStyle="{ height: '64rpx', fontSize: '16rpx', padding: '0 16rpx' }"></u--input>
                            <u-icon name="calendar" size="16" color="#999" class="calendar-icon" />
                        </view>
                    </view>
                </view>

                <view class="filter-item">
                    <text class="filter-label">状态</text>
                    <view class="picker-input" @click="showStatusPicker = true">
                        <text>{{ filter.status || '全部' }}</text>
                        <u-icon name="arrow-down" size="16" color="#999" />
                    </view>
                </view>
            </view>

            <!-- 操作按钮 -->
            <view class="action-buttons">
                <u-button type="primary" size="small" @click="onSearch"
                    :customStyle="{ background: '#0A993B', borderColor: '#0A993B', color: '#fff' }">查询</u-button>
                <u-button size="small" @click="onReset">重置</u-button>
            </view>
        </view>

        <!-- 列表 -->
        <view class="list-wrap">
            <view v-for="(item, idx) in filteredList" :key="idx" class="card">
                <view class="card-hd">
                    <view class="title">{{ item.title }}</view>
                    <view class="tag" :class="item.status === '未查看' ? 'tag-danger' : 'tag-success'">{{ item.status }}
                    </view>
                </view>
                <view class="card-bd">
                    <view class="row2">系统录入</view>
                    <view class="row2">发送单位：{{ item.dept }}</view>
                    <view class="row2 time">{{ item.time }}</view>
                </view>
                <view class="card-ft">
                    <u-button text="查看" size="small" @click="onView(item)"></u-button>
                </view>
            </view>
        </view>

        <!-- 状态选择器 -->
        <u-picker :show="showStatusPicker" :columns="[statusOptions]" @confirm="onStatusConfirm"
            @cancel="showStatusPicker = false" @close="showStatusPicker = false" />
        <!-- 日期选择器（用年份列占位，可替换为具体日期选择器组件） -->
        <u-picker :show="showStartYearPicker" :columns="[yearOptions]" @confirm="onStartYearConfirm"
            @cancel="showStartYearPicker = false" @close="showStartYearPicker = false" />
        <u-picker :show="showEndYearPicker" :columns="[yearOptions]" @confirm="onEndYearConfirm"
            @cancel="showEndYearPicker = false" @close="showEndYearPicker = false" />

        <!-- 详情弹框 -->
        <u-popup :show="showDetail" mode="center" :round="18" @close="showDetail = false"
            :customStyle="{ width: '670rpx' }">
            <view class="detail-modal">
                <view class="detail-header">
                    <text class="detail-title">问题反馈详情</text>
                    <u-icon name="close" size="28" color="#999" @click="showDetail = false"></u-icon>
                </view>
                <view class="detail-body">
                    <view class="d-row"><text class="d-label">标题</text><text class="d-value">{{ currentItem.title
                            }}</text></view>
                    <view class="d-row"><text class="d-label">发送单位</text><text class="d-value">{{ currentItem.dept
                            }}</text></view>
                    <view class="d-row"><text class="d-label">接收部门</text><text class="d-value">{{
                            currentItem.receiveDept }}</text></view>
                    <view class="d-row"><text class="d-label">类别</text><text class="d-value">{{ currentItem.category
                            }}</text></view>
                    <view class="d-row"><text class="d-label">内容</text><text class="d-value">{{ currentItem.content
                            }}</text></view>
                    <view class="d-row"><text class="d-label">备注</text><text class="d-value">{{ currentItem.remark
                            }}</text></view>
                    <view class="d-row"><text class="d-label">附件</text>
                        <text class="d-link" @click="openAttach(currentItem.attachUrl)">{{ currentItem.attachName
                            }}</text>
                    </view>
                </view>
                <view class="detail-actions">
                    <u-button @click="showDetail = false">关闭</u-button>
                </view>
            </view>
        </u-popup>
    </div>
</template>

<script>
import navbarMixin from '@/common/navbarMixin'
export default {
	mixins: [navbarMixin],
    data() {
        return {
            searchKeyword: '',
            filter: {
                startDate: '',
                endDate: '',
                status: ''
            },
            yearOptions: (() => {
                const currentYear = new Date().getFullYear()
                const years = []
                for (let i = currentYear + 1; i >= currentYear - 10; i--) {
                    years.push(i.toString())
                }
                return years
            })(),
            showStartYearPicker: false,
            showEndYearPicker: false,
            showStatusPicker: false,
            statusOptions: ['全部', '未查看', '已查看'],
            list: [
                { title: '样品检测异常', dept: '山东省林业局', time: '2024-05-10 15:23', status: '未查看', receiveDept: '省自然资源厅', category: '系统录入', content: '检测过程中发现样品数据异常，请核查。', remark: '请尽快处理', attachName: '异常报告.pdf', attachUrl: 'https://example.com/a.pdf' },
                { title: '数据上报延迟', dept: '济南市林业局', time: '2024-05-10 15:23', status: '已查看', receiveDept: '省自然资源厅', category: '系统录入', content: '上报数据延迟，请关注处理。', remark: '—', attachName: '延迟说明.pdf', attachUrl: 'https://example.com/b.pdf' },
                { title: '系统登录异常', dept: '青岛市林业局', time: '2024-05-10 15:23', status: '未查看', receiveDept: '省自然资源厅', category: '系统录入', content: '出现多次登录失败告警。', remark: '优先排查', attachName: '登录日志.pdf', attachUrl: 'https://example.com/c.pdf' }
            ],
            showDetail: false,
            currentItem: {}
        }
    },
    computed: {
        filteredList() {
            return this.list.filter(item => {
                // 关键词
                if (this.searchKeyword && this.searchKeyword.trim()) {
                    const key = this.searchKeyword.trim().toLowerCase()
                    const text = `${item.title}${item.dept}${item.status}`.toLowerCase()
                    if (!text.includes(key)) return false
                }
                // 时间（仅按年份字符串比较，实际可换日期）
                if (this.filter.startDate) {
                    const y = (item.time || '').substring(0,4)
                    if (y < this.filter.startDate) return false
                }
                if (this.filter.endDate) {
                    const y = (item.time || '').substring(0,4)
                    if (y > this.filter.endDate) return false
                }
                // 状态
                if (this.filter.status && this.filter.status !== '全部') {
                    if (item.status !== this.filter.status) return false
                }
                return true
            })
        }
    },
    methods: {
        onSearch() {
            // 触发computed重新计算即可
        },
        onReset() {
            this.searchKeyword = ''
            this.filter = { startDate: '', endDate: '', status: '' }
        },
        onStatusConfirm(e) {
            this.filter.status = e.value[0]
            this.showStatusPicker = false
        },
        onStartYearConfirm(e) {
            this.filter.startDate = e.value[0]
            this.showStartYearPicker = false
        },
        onEndYearConfirm(e) {
            this.filter.endDate = e.value[0]
            this.showEndYearPicker = false
        },
        onView(item) {
            this.currentItem = item
            this.showDetail = true
        },
        openAttach(url) {
            if (!url) return
            // 小程序/APP可用 uni.downloadFile 或 openDocument，这里先用浏览器打开
            uni.navigateTo({ url: `/pages/webview/webview?url=${encodeURIComponent(url)}` })
        }
    }
}
</script>

<style lang="scss" scoped>
.mine-navbar-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 750rpx;
    
    z-index: 1;
}

/* 主题主色：绿色 */
::v-deep(.u-button--primary) {
    background-color: #0A993B !important;
    border-color: #0A993B !important;
}
::v-deep(.u-button--primary.is-plain) {
    color: #0A993B !important;
    border-color: #0A993B !important;
}

/* 顶部筛选区域样式（对齐 02jcrwxf.vue） */
.search-filter-box {
    background: #fff;
    margin: 20rpx;
    padding: 30rpx;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.search-row {
    margin-bottom: 30rpx;
}

.filter-row {
    display: flex;
    flex-direction: column;
    gap: 10rpx;
    margin-bottom: 20rpx;
}

.filter-item {
    display: flex;
    align-items: center;

    .filter-label {
        width: 160rpx;
        font-size: 28rpx;
        color: #666;
        flex-shrink: 0;
    }

    .date-inputs {
        display: flex;
        align-items: center;
        flex: 1;
        gap: 20rpx;

        .date-input-wrapper {
            position: relative;
            flex: 1;
        }

        .date-input-wrapper.end {
            flex: 0.9; /* Adjust as needed */
        }

        .calendar-icon {
            position: absolute;
            right: 20rpx;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
        }

        .date-separator {
            color: #999;
            font-size: 28rpx;
        }
    }

    .picker-input {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #f8f9fa;
        padding: 15rpx;
        border-radius: 12rpx;
        color: #333;
        font-size: 28rpx;
    }
}

.action-buttons {
    display: flex;
    gap: 20rpx;
}

.action-buttons .u-button {
    flex: 1;
}

/* 列表 */
.list-wrap {
    margin: 20rpx;
}

.card {
    background: #fff;
    border-radius: 16rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
}

.card-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.title {
    font-size: 30rpx;
    font-weight: 600;
    color: #333;
}

.tag {
    padding: 6rpx 16rpx;
    border-radius: 24rpx;
    font-size: 22rpx;
    color: #fff;
}

.tag-danger {
    background: #ff4d4f;
}

.tag-success {
    background: #52c41a;
}

.card-bd {
    margin-top: 12rpx;
    color: #666;
}

.card-bd .row2 {
    font-size: 24rpx;
    margin-top: 6rpx;
}

.card-bd .time {
    color: #9aa0a6;
}

.card-ft {
    margin-top: 16rpx;
    display: flex;
    justify-content: flex-end;
}

/* 详情弹框 */
.detail-modal {
    background: #fff;
    border-radius: 18rpx;
    overflow: hidden;
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28rpx;
    border-bottom: 1rpx solid #f0f0f0;
}

.detail-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
}

.detail-body {
    padding: 24rpx 28rpx;
}

.d-row {
    display: flex;
    margin-bottom: 14rpx;
    align-items: baseline;
}

.d-label {
    width: 140rpx;
    color: #666;
    font-size: 26rpx;
    flex-shrink: 0;
}

.d-value {
    flex: 1;
    color: #333;
    font-size: 26rpx;
}

.d-link {
    color: #0A993B;
    text-decoration: underline;
    font-size: 26rpx;
}

.detail-actions {
    padding: 20rpx 28rpx 28rpx;
    display: flex;
    justify-content: center;
}
</style>